<template>
    <el-dialog
        class="dialog"
        width="520px"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-layer-top"
            :model="formData"
            :rules="rules"
        >
            <div class="box-row">

                    <uxTree
                        ref="tree"
                        show-checkbox
                        highlight-current
                        node-key="menu_sn"
                        :data="menuData"
                        :default-expand-all="true"
                        :indent="0"
                        :props="treeParams"
                        @check="onCheck"
                    />

            </div>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmitBefore">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter } from 'vuex-class';
import { mixinDialogForm } from '@/mixin/dialog/Form';
import { isEmpty } from '@/utils/index';
import { includes } from 'lodash';
import XEUtils from 'xe-utils';
import uxTree from '@/components/tree';
@Component({
    name: 'parkAuthSetting',
    mixins: [mixinDialogForm],
    components: { uxTree }
})
export default class parkAuthSetting extends Vue {
    @Action('park/auth') itemEdit: any;
    @Action('purviewRole/agentParkMenu') getMenu: any;
    @Getter('purviewRole/agentParkMenu') menuData: any;


    editInit(data: any) {
        const me = this as any;
        me.getMenu({ agent_sn: data.agent_sn }).then(() => {
            data.role_authList = data.menu_auth;
            me.formData = Object.assign({}, me.formData, data);
            me.checkedTree();
        })

    }
    checkedTree() {
        const data = this.menuData,
            selectIds = this.formData.role_authList;
        if (!isEmpty(data) && !isEmpty(selectIds)) {
            const list: any = [];
            // 获取的选中项不包括父节点id，避免展示错误
            XEUtils.eachTree(data, (item) => {
                if (!item.children) {
                    if (includes(selectIds, item.menu_sn)) {
                        list.push(item.menu_sn);
                    }
                }
            });
            const menuTree: any = this.$refs.tree;
            // 设置当前选中权限
            menuTree.setCheckedKeys(list);
        }
    }
    // 表单数据
    formData: any = {
        menu_auth: [],
        remark: ''
    };
    roledata: any = [];
    // 表单验证
    rules: any = {
        menu_auth: [
            {
                required: true,
                message: "请选择园区拥有的菜单权限",
                trigger: "blur"
            }
        ]
    };

    // 标题
    get title() {
        return '园区权限';
    }
    // 角色选中时
    onCheck(item: any, data: any) {
        const list = data.checkedKeys;
        // 将半选中节点id添加进去
        list.push(...data.halfCheckedKeys);
        this.formData.role_authList = list;
    }
    closeBefore() {
        const me = this as any;
        // 清除当前选中权限
        me.$refs.tree.setCheckedKeys([]);
        me.formData.role_authList = [];
    }
    // 保存
    onSubmitBefore() {
        const me = this as any;
        if (!me.formData.role_authList.length) {
            me.$message({
                message: '请选择角色权限',
                type: 'error',
                customClass: 'zZindex'
            });
        } else {
            me.formData.menu_auth = me.formData.role_authList.toString();
            me.onSubmit();
        }
    }
    treeParams: any = {
        label: 'menu_name'
    };
}
</script>
<style lang="scss" scoped>
.box-row {
    .el-tree {
      //  padding: 2px;
        height: 40vh;
        overflow: auto;
    }
}
</style>